<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>登录</h1>
<form action="login" method="post"
      style="width: 200px; margin: 50px auto; background-color: #eee; padding: 50px">
    账号:<input name="username"><br>
    密码:<input name="password"><br>
    <button>登录</button>
</form>

<h1>修改密码</h1>
<form action="setpwd" method="post"
      style="width: 200px; margin: 50px auto; background-color: #eee; padding: 50px">
    原密码:<input name="oldPwd"><br>
    新密码:<input name="newPwd"><br>
    确认密码:<input name="rePwd"><br>
    <button>修改密码</button>
</form>

<h1>重置密码</h1>
<div id="app">
    <form action="setpwd" method="post"
          style="width: 200px; margin: 50px auto; background-color: #eee; padding: 50px">
        <div v-if=" !isSend ">
            用户名:<input v-model="name"><br>
            <button @click.prevent="forget">忘记密码</button>
        </div>
        <div v-else>
            验证码:<input name="vcode"><br>
            新密码:<input name="newPwd"><br>
            确认密码:<input name="rePwd"><br>
            <button @click.prevent="resetPwd">重置密码</button>
        </div>
    </form>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            isSend : false, // 邮件发送标志
            name : "",
            vcode : "",
            newPwd : "",
            rePwd : ""
        },
        methods:{
            forget(){
                if (!this.name){
                    alert("请输入用户名");
                    return;
                }
                axios.get("forgetPwd?name=" + this.name).then(res=>{
                    alert(res.data.msg);
                    if (res.data.code){
                        this.isSend = true;
                    }
                })
            },
            resetPwd(){
                if (!this.vcode){
                    alert("请输入验证码");
                    return;
                }
                if (!this.newPwd){
                    alert("请输入新密码");
                }
                if (!this.rePwd){
                    alert("请输入确认密码");
                }
                let p = new URLSearchParams();
                p.append("vcode", this.vcode);
                p.append("newPwd", this.newPwd);
                p.append("rePwd", this.rePwd);
                axios.post("resetPwd", p).then(res=>{
                    alert(res.data.msg);
                });
            }
        }
    })
</script>
</body>
</html>